
<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="kpi-card">
          <div class="kpi-title">分拣差异率</div>
          <div class="kpi-value" :class="{ 'warning': kpiData.sortingDiff > 0.5 }">
            {{ kpiData.sortingDiff }}%
            <span class="kpi-target">目标: ≤0.5%</span>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="kpi-card">
          <div class="kpi-title">扫码率</div>
          <div class="kpi-value" :class="{ 'warning': kpiData.scanRate < 98 }">
            {{ kpiData.scanRate }}%
            <span class="kpi-target">目标: ≥98%</span>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="kpi-card">
          <div class="kpi-title">MAPE</div>
          <div class="kpi-value" :class="{ 'warning': kpiData.mape > 10 }">
            {{ kpiData.mape }}%
            <span class="kpi-target">目标: ≤10%</span>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="kpi-card">
          <div class="kpi-title">盘点差异率</div>
          <div class="kpi-value" :class="{ 'warning': kpiData.inventoryDiff > 1 }">
            {{ kpiData.inventoryDiff }}%
            <span class="kpi-target">目标: ≤1%</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>实时风险预警</span>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="alert in riskAlerts"
              :key="alert.id"
              :type="alert.type"
              :timestamp="alert.timestamp"
            >
              {{ alert.message }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>冷链温度监控</span>
          </template>
          <div ref="temperatureChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const kpiData = ref({
  sortingDiff: 0.3,
  scanRate: 99.2,
  mape: 8.5,
  inventoryDiff: 0.7
})

const riskAlerts = ref([
  {
    id: 1,
    type: 'danger',
    timestamp: '2024-11-01 10:15:32',
    message: '区域A加工超时，已超过24小时限制'
  },
  {
    id: 2,
    type: 'warning',
    timestamp: '2024-11-01 09:45:12',
    message: '冷链车辆CV-001探头异常，温度偏差>1℃'
  },
  {
    id: 3,
    type: 'info',
    timestamp: '2024-11-01 08:30:45',
    message: '门店ST-015扫码率低于98%，已通知整改'
  }
])

let temperatureChartInstance = null

onMounted(() => {
  initTemperatureChart()
})

onUnmounted(() => {
  if (temperatureChartInstance) {
    temperatureChartInstance.dispose()
  }
})

const initTemperatureChart = () => {
  const chartDom = document.querySelector('[ref="temperatureChart"]')
  temperatureChartInstance = echarts.init(chartDom)
  
  const option = {
    title: {
      text: '冷链车辆实时温度'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['车辆1', '车辆2', '车辆3']
    },
    xAxis: {
      type: 'time',
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      name: '温度(℃)',
      min: -5,
      max: 5
    },
    series: [
      {
        name: '车辆1',
        type: 'line',
        data: generateTemperatureData(),
        smooth: true
      },
      {
        name: '车辆2',
        type: 'line',
        data: generateTemperatureData(),
        smooth: true
      },
      {
        name: '车辆3',
        type: 'line',
        data: generateTemperatureData(),
        smooth: true
      }
    ]
  }
  
  temperatureChartInstance.setOption(option)
}

const generateTemperatureData = () => {
  const data = []
  const now = new Date()
  for (let i = 0; i < 20; i++) {
    data.push([
      new Date(now.getTime() - (19 - i) * 60000),
      Math.random() * 4 - 2
    ])
  }
  return data
}
</script>

<style scoped>
.kpi-card {
  text-align: center;
}

.kpi-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.kpi-value {
  font-size: 24px;
  font-weight: bold;
  color: #67C23A;
}

.kpi-value.warning {
  color: #E6A23C;
}

.kpi-target {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
</style>
